<template>
    <div class="header">
        <div class="headerA">
            <ul>
                <li>DM官网</li>
                <li @click="goIndex">DM商城</li>
                <li>MIUI</li>
                <li>LOT</li>
                <li>云服务</li>
                <li>天星数科</li>
                <li>有品</li>
                <li>小爱开放平台</li>
                <li>企业团购</li>
                <li>资质证照</li>
                <li>协议规则</li>
                <li>下载APP</li>
                <li>Select Location</li>
            </ul>

            <div v-if="isLogin" style="color:white;" class="yidenglu">
                <li @click="goGeren">{{welcome}}</li>
                <li @click="goLogout">退出登录</li>
                <li @click="goOrder">我的订单</li>
            </div>

            <ul v-else>
                <li @click="goLogin">已有账号？去登录</li>
            </ul>
            <button v-if="isLogin" @click="goCar"><i class="el-icon-shopping-cart-full"></i>
                购物车({{carList.length}})</button>
        </div>

        <div class="headerB">
            <img src="../assets/QQ图片20221022181949.png" alt="" @click="goIndex">
            <ul>
                <li>XM手机</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>平板</li>
                <li>家电</li>
                <li>路由器</li>
                <li>服务中心</li>
                <li>社区</li>
            </ul>
            <input type="search" placeholder="手机">

        </div>


    </div>
</template>

<script>
//引入--获取购物车的请求地址
import { getCar } from '@/assets/request'

//引入vuex的方法--getters是直接用的 所以放在计算属性里
import { mapGetters, mapState, mapMutations } from "vuex"


export default {
    name: 'NavHeader',
    data() {
        return {
            carList: [],

        }
    },

    //方法-路由跳转
    methods: {
        goCar() {
            this.$router.push({
                name: 'cart',

            })
        },

        goLogin() {

            this.$router.push({
                name: 'login',
            })
        },

        goIndex() {
            this.$router.push({
                name: 'Index'
            })
        },

        goOrder() {
            this.$router.push({
                name: "orderlist"
            })

        },

        goGeren(){
            this.$router.push({
                name:"gerenzhuye"
            })

        },


        async getNum() {
            let res = await getCar({
                project_id: 267,
            })
            // console.log(res);
            console.log(res.data.result.length);
            return res.data.result.length

        },
        //退出登录的方法
        ...mapMutations('user', ["logout"]),

        //点击退出登录后
        goLogout() {
            
           //组件弹框确认
            this.$messagebox.confirm('请确认是否退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                //点击确定后调用vuex中的退出登录方法
                this.logout()
              

                //执行方法后弹窗提醒已退出登录
                this.$message({
                    type: 'success',
                    message: '已退出登录'
                });

                this.$router.push({
                    name:"Index",
                })

               
            }).catch(() => {
                //点击取消后不弹框
                //   this.$message({
                //     type: 'info',
                //     message: '已取消~'
                //   });          
            });
        },
    },

    computed: {

        //拿vuex的欢迎词
        ...mapGetters("user", ["welcome"]),
        //拿用户是否登录的判断标志位
        ...mapState("user", ['isLogin']),

    },

    //钩子--发送请求
    async mounted() {

        let res = await getCar({
            project_id: 267,
        })
        // console.log(res);
        this.carList = res.data.result

    }
}

</script>

<style lang='scss' scoped>
.header {
    width: 100%;
    background-color: gainsboro;

    .headerA {
        background-color: #333333;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-around;


        .yidenglu {
            display: flex;

            li {
                cursor: pointer;
                padding: 10px;

                &:hover {
                    color: orange;
                    transition: all 0.5s;
                    background-color: #fff;
                }
            }
        }

        ul {
            display: flex;
            color: #b0b0b0;

            li {
                border-right: 1px solid gray;
                padding: 0px 10px;
                cursor: pointer;

                &:hover {
                    color: white;
                    transition: all 0.5s;
                }

            }
        }

        button {
            width: 148px;
            height: 100%;
            background-color: #424242;
            border: none;
            color: rgb(189, 184, 184);
            cursor: pointer;

            &:hover {
                background-color: white;
                color: orange;
                transition: all 0.5s;
            }
        }
    }

    .headerB {
        width: 1410px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 50px;
        background-color: gainsboro;

        img {
            width: 100px;
            height: 80px;
            margin-left: 100px;
            cursor: pointer;
        }

        ul {
            display: flex;

            li {
                padding: 0px 12px;
                color: #333333;
                font-size: 18px;
                cursor: pointer;

                &:hover {
                    color: orange;
                    transition: all 0.5s;
                }

            }
        }

        input {
            width: 280px;
            height: 50px;
            border: 1px solid rgb(207, 203, 203);
            font-size: 17px;
            padding: 10px;
        }


    }
}
</style>

